.wrap {
    position: relative;
	width: 40px;
    height: 40px;
	overflow: hidden;
	&:before{
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 100%;
	}
	:global(.img){
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
    &-small {
        width: 40px;
        height: 40px;
    }
    &-large {
        width: 84px;
        height: 84px;
    }
    &-round {   
        :global(.img) {
            border-radius: 50%;    
        }            
    }

    :global(.fa) {
        position: absolute;
        right: -3px;
        bottom: -3px;
        display: block;
        color: $theme-color;
        font-size: 18px;
        background-color: $color-white;
        border-radius: 50%;
    }
    :global(.icon){
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    &-large {
        :global(.icon){
            width: 22px;
            height: 22px;
        }
    }
}